<template>
  <div>
    <h1>图书列表</h1>
    <router-link to="/add">添加</router-link>
    <el-table
        :data="bookPage"
        style="width: 100%"
        max-height="500">
      <el-table-column
          fixed
          prop="bookId"
          label="图书id"
          width="150">
      </el-table-column>
      <el-table-column
          prop="bookName"
          label="书名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="author.authorName"
          label="作者名字"
          width="120">
      </el-table-column>
      <el-table-column
          prop="publisher"
          label="出版设"
          width="120">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="300">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="toUpdatePage(scope.$index, bookPage)"
              type="text"
              size="small">
            修改
          </el-button>
          <el-button
              @click.native.prevent="deleteBook(scope.$index, bookPage)"
              type="text"
              size="small">
            删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>


    <div class="block">
      <!--      <span class="demonstration">完整功能</span>-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=current
          :page-sizes="[5, 10, 20, 50]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>

</template>

<script>
// @ is an alias to /src

export default {
  name: 'ListView',
  data() {
    return {
      bookPage: null,
      total: 0,
      current: 1,
      size: 5,
      pages: 0,
      book: {
        bookId: "",
        bookName: "",
        authorId: "",
        publisher: "",
        price: "",
        author: {
          authorId: "",
          authorName: "",
          authorGender: "",
          authorNativeName: "",
        }
      }
    }
  },
  methods: {

    loadBooks(current) {
      this.current = current
      this.axios.get("book?current=" + this.current + "&size=" + this.size)
          .then(result => {
            this.bookPage = result.data.data.records
            this.pages = result.data.data.pages
            this.total = result.data.data.total
          })
    },

    toUpdatePage(index, rows) {
      this.$router.push({
        path: "/update",
      query:{id:rows[index].bookId}})
    },
    deleteBook(index, rows) {
      this.axios.delete("book/" + rows[index].bookId)
          .then(result => {
            console.log(result.data);
            if (result.data.code == 200) {
              this.loadBooks(this.current);
            }
          })
    },
    handleSizeChange(val) {
      this.size=val
      this.loadBooks(this.current)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.current=val
      this.loadBooks(this.current)
      console.log(`当前页: ${val}`)
    }
  },
  mounted() {
    this.loadBooks(1);
  }

}
</script>
